<template>
  <div id="order-query-wrapper">
    <div class="content">
      <div class="info">
        <el-form ref="formRef" :model="form" label-width="120px" class="employee-form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入身份证号"></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <el-form-item label="所属公司" prop="company">
            <el-input v-model="form.company" placeholder="请输入所属公司"></el-input>
          </el-form-item>

          <el-form-item label="工号" prop="employeeId">
            <el-input v-model="form.employeeId" placeholder="请输入工号"></el-input>
          </el-form-item>

          <el-form-item label="岗位职责" prop="jobDuty">
            <el-input type="textarea" v-model="form.jobDuty" placeholder="请输入岗位职责" :rows="3"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const form = reactive({
  username: '',       // 用户名
  name: '',           // 姓名
  idCard: '',         // 身份证号
  phone: '',          // 手机号
  company: '',        // 所属公司
  employeeId: '',     // 工号
  jobDuty: ''         // 岗位职责
});

const handleSubmit = () => {
  console.log('submit!')
}
const handleReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss">
#order-query-wrapper {
  display: flex;
  justify-content: center;
  /* 水平方向居中 */
  align-items: center;
  /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content {
    display: flex;
    justify-content: center;
    /* 水平方向居中 */
    align-items: center;
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;

    .info {
      width: 400px;
      height: 600px;
    }
  }
}
</style>